<template>
  <section id="about" class="py-24 md:py-32" :style="{
    backgroundColor: bgColor
  }">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 加载状态显示 -->
      <div v-if="isLoading" class="flex justify-center items-center py-24">
        <div class="text-center">
          <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2"
            :style="{ borderColor: primaryColor }" aria-label="Loading"></div>
          <p class="mt-4 text-lg text-gray-600">正在加载关于我们数据...</p>
        </div>
      </div>

      <template v-else>
        <!-- 标题区域 -->
        <div class="text-center max-w-3xl mx-auto mb-16">
          <span class="font-medium" :style="{ color: primaryColor }">关于我们</span>
          <h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mt-2 mb-4 text-gray-800">智联科技的故事</h2>
          <p class="text-lg text-gray-600 leading-relaxed">我们致力于为企业提供最前沿的技术解决方案，帮助企业在数字化浪潮中保持竞争力</p>
        </div>

        <div class="flex flex-col lg:flex-row gap-12 items-center">
          <!-- 左侧图片区域 -->
          <div class="w-full lg:w-1/2 relative" v-if="showImage">
            <img :src="companyImage" alt="公司办公环境" class="w-full h-auto rounded-xl shadow-lg"
              :style="{ borderRadius: `${imageRadius}px` }">

            <!-- 使命卡片 -->
            <div v-if="showMissionCard" class="absolute -bottom-6 -right-6 bg-white p-6 rounded-xl shadow-lg max-w-xs"
              :style="{ borderRadius: `${cardRadius}px` }">
              <div class="flex items-center mb-3">
                <div class="text-3xl mr-3" :style="{ color: primaryColor }">
                  <i class="fa" :class="missionIcon"></i>
                </div>
                <div>
                  <h3 class="font-bold text-gray-800">我们的使命</h3>
                  <p class="text-sm text-gray-600">用技术创新推动企业发展</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧内容区域 -->
          <div class="w-full lg:w-1/2">
            <h3 class="text-2xl font-bold mb-4 text-gray-800">引领行业创新，<br>打造未来企业</h3>
            <p class="text-gray-700 mb-6">
              智联科技成立于2003年，是一家专注于企业数字化转型的高新技术企业。我们拥有一支由行业专家组成的团队，致力于为客户提供最优质的服务和解决方案。
            </p>

            <!-- 公司优势 -->
            <div class="space-y-4 mb-8" v-if="showAdvantages">
              <div v-for="(advantage, index) in advantages" :key="index" class="flex items-start">
                <div class="mt-1 mr-4" :style="{ color: primaryColor }">
                  <i class="fa fa-check-circle"></i>
                </div>
                <div>
                  <h4 class="font-semibold text-gray-800">{{ advantage.title }}</h4>
                  <p class="text-sm text-gray-600">{{ advantage.description }}</p>
                </div>
              </div>
            </div>

            <!-- 公司发展历程 -->
            <div class="mb-8" v-if="showTimeline">
              <h4 class="font-bold text-lg mb-4 text-gray-800">公司发展历程</h4>
              <div class="relative pl-6 border-l-2 space-y-4" :style="{ borderColor: `${primaryColor}20` }">
                <div v-for="(event, index) in timelineEvents" :key="index" class="relative">
                  <div class="absolute -left-8 top-0 w-4 h-4 rounded-full" :style="{ backgroundColor: primaryColor }">
                  </div>
                  <p class="font-medium text-gray-800">{{ event.year }}</p>
                  <p class="text-sm text-gray-600">{{ event.description }}</p>
                </div>
              </div>
            </div>

            <!-- 联系按钮 -->
            <a :href="contactLink"
              class="inline-flex items-center px-6 py-3 text-white rounded-lg hover:opacity-90 transition-all duration-300"
              :style="{ backgroundColor: primaryColor }" @click.prevent="handleContactClick">
              联系我们
              <i class="fa fa-arrow-right ml-2"></i>
            </a>

            <!-- 有数据源URL时显示刷新按钮 -->
            <button v-if="dataSourceUrl"
              class="inline-flex items-center px-4 py-2 ml-3 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 transition-all duration-300"
              @click="refresh" :disabled="isLoading">
              <i class="fa fa-refresh mr-2"></i>
              刷新数据
            </button>
          </div>
        </div>
      </template>
    </div>
  </section>
</template>

<script>
export default {
  name: 'AboutUs',
  // 低代码平台元数据
  lowcode: {
    meta: {
      name: 'about-us',
      displayName: '关于我们',
      description: '展示公司介绍、发展历程和核心优势的组件',
      icon: 'fa-building',
      category: '内容展示',
      version: '1.0.0',
      isContainer: false
    },

    configPanel: [
      {
        title: '基本配置',
        fields: [
          {
            name: 'primaryColor',
            label: '主题色',
            type: 'color',
            defaultValue: '#165DFF'
          },
          {
            name: 'secondaryColor',
            label: '辅助色',
            type: 'color',
            defaultValue: '#36CFC9'
          },
          {
            name: 'bgColor',
            label: '背景色',
            type: 'color',
            defaultValue: '#f9fafb'
          }
        ]
      },
      { title: '数据源配置', fields: [{ name: 'dataSourceUrl', label: '数据源URL', type: 'text', defaultValue: '', description: 'API接口地址，用于动态加载关于我们数据' }, { name: 'autoLoad', label: '自动加载', type: 'boolean', defaultValue: true, description: '组件挂载时自动加载数据' }] },
      {
        title: '内容配置',
        fields: [
          {
            name: 'showImage',
            label: '显示公司图片',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'showMissionCard',
            label: '显示使命卡片',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'showAdvantages',
            label: '显示公司优势',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'showTimeline',
            label: '显示发展历程',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'contactLink',
            label: '联系链接',
            type: 'text',
            defaultValue: '#contact'
          }
        ]
      },
      {
        title: '样式配置',
        fields: [
          {
            name: 'cardRadius',
            label: '卡片圆角',
            type: 'number',
            min: 0,
            max: 20,
            defaultValue: 8
          },
          {
            name: 'imageRadius',
            label: '图片圆角',
            type: 'number',
            min: 0,
            max: 20,
            defaultValue: 8
          },
          {
            name: 'missionIcon',
            label: '使命图标',
            type: 'text',
            defaultValue: 'fa-lightbulb-o'
          }
        ]
      }
    ],

    events: [
      {
        name: 'contactClick',
        label: '联系我们点击',
        description: '点击联系我们按钮时触发'
      },
      {
        name: 'dataLoaded',
        label: '数据加载成功',
        description: '从数据源加载数据成功时触发'
      },
      {
        name: 'dataLoadError',
        label: '数据加载失败',
        description: '从数据源加载数据失败时触发'
      }
    ],

    actions: [
      {
        name: 'updateTimeline',
        label: '更新发展历程',
        description: '更新公司发展历程事件',
        parameters: [
          { name: 'events', type: 'array', required: true, description: '历程事件数组' }
        ]
      }
    ]
  },

  props: {
    // 颜色配置
    primaryColor: {
      type: String,
      default: '#165DFF'
    },
    secondaryColor: {
      type: String,
      default: '#36CFC9'
    },
    bgColor: {
      type: String,
      default: '#f9fafb'
    },

    children: {
      type: Array,
      default: () => []
    },

    // 数据源配置
    dataSourceUrl: {
      type: String,
      default: ''
    },
    autoLoad: {
      type: Boolean,
      default: true
    },


    // 内容显示配置
    showImage: {
      type: Boolean,
      default: true
    },
    showMissionCard: {
      type: Boolean,
      default: true
    },
    showAdvantages: {
      type: Boolean,
      default: true
    },
    showTimeline: {
      type: Boolean,
      default: true
    },

    // 样式配置
    cardRadius: {
      type: Number,
      default: 8,
      validator: (value) => value >= 0 && value <= 20
    },
    imageRadius: {
      type: Number,
      default: 8,
      validator: (value) => value >= 0 && value <= 20
    },
    missionIcon: {
      type: String,
      default: 'fa-lightbulb-o'
    },

    // 链接配置
    contactLink: {
      type: String,
      default: '#contact'
    },

    // 公司图片
    companyImage: {
      type: String,
      default: 'https://picsum.photos/seed/about/600/700'
    },

    // 公司优势
    advantages: {
      type: Array,
      default: () => [
        {
          title: '专业的技术团队',
          description: '由行业资深专家组成，拥有丰富的实战经验'
        },
        {
          title: '创新的解决方案',
          description: '结合前沿技术，为企业量身定制解决方案'
        },
        {
          title: '完善的服务体系',
          description: '从咨询到实施，提供全流程的专业服务'
        },
        {
          title: '持续的技术创新',
          description: '不断研发新技术，保持行业领先地位'
        }
      ]
    },

    // 发展历程
    timelineEvents: {
      type: Array,
      default: () => [
        {
          year: '2003年',
          description: '公司成立，专注于企业信息化建设'
        },
        {
          year: '2010年',
          description: '推出首款自主研发的ERP系统'
        },
        {
          year: '2018年',
          description: '布局云计算和大数据领域'
        },
        {
          year: '2023年',
          description: '推出AI驱动的企业智能解决方案'
        }
      ]
    },


  },

  data() {
    return {
      // 加载状态
      isLoading: false,
      // 原始数据备份
      originalAdvantages: this.advantages,
      originalTimelineEvents: this.timelineEvents
    }
  },

  mounted() {
    // 保存原始静态数据
    this.originalAdvantages = [...this.advantages];
    this.originalTimelineEvents = [...this.timelineEvents];

    // 如果启用了自动加载且有数据源URL，则加载数据
    if (this.autoLoad && this.dataSourceUrl) {
      this.loadDataFromSource();
    }
  },

  watch: {
    // 监听数据源URL变化
    dataSourceUrl(newUrl, oldUrl) {
      if (this.autoLoad && newUrl && newUrl !== oldUrl) {
        this.loadDataFromSource();
      }
    }
  },

  methods: {
    /**
     * 从数据源加载数据
     */
    async loadDataFromSource() {
      if (!this.dataSourceUrl) {
        this.$emit('dataLoadError', { message: '数据源URL不能为空' });
        return;
      }

      this.isLoading = true;

      try {
        const response = await fetch(this.dataSourceUrl);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();

        // 验证数据格式并更新
        if (data.advantages && Array.isArray(data.advantages)) {
          this.advantages = data.advantages;
        }

        if (data.timelineEvents && Array.isArray(data.timelineEvents)) {
          this.timelineEvents = data.timelineEvents;
        }

        // 如果有公司图片也更新
        if (data.companyImage) {
          this.companyImage = data.companyImage;
        }

        this.$emit('dataLoaded', data);
      } catch (error) {
        console.error('加载数据失败:', error);
        this.$emit('dataLoadError', { message: error.message });
      } finally {
        this.isLoading = false;
      }
    },

    /**
     * 刷新数据
     */
    refresh() {
      if (this.dataSourceUrl) {
        this.loadDataFromSource();
      }
    },

    /**
     * 恢复原始数据
     */
    restoreOriginalData() {
      this.advantages = [...this.originalAdvantages];
      this.timelineEvents = [...this.originalTimelineEvents];
    },
    /**
     * 处理联系我们点击事件
     */
    handleContactClick() {
      this.$emit('contactClick');

      // 如果配置了有效链接，执行跳转
      if (this.contactLink && this.contactLink !== '#') {
        if (this.contactLink.startsWith('#')) {
          // 页内锚点跳转
          const targetElement = document.querySelector(this.contactLink);
          if (targetElement) {
            targetElement.scrollIntoView({ behavior: 'smooth' });
          }
        } else {
          // 外部链接跳转
          window.location.href = this.contactLink;
        }
      }
    },

    /**
     * 更新发展历程
     */
    updateTimeline(events) {
      if (Array.isArray(events)) {
        this.timelineEvents = events;
      }
    },


  }
};
</script>

<style scoped>
/* 已替换为Tailwind CSS样式 */
</style>